<template>
  <div>
    <IndexHeader></IndexHeader>
    <div class="row center">
      <el-card class="login-main">
        <el-form
          :model="LoginForm"
          ref="LoginForm"
          :rules="rule"
          label-width="60px"
          style="align: 'center'"
        >
          <h3
            style="
              font-weight: bolder;
              font-size: larger;
              margintop: 80px;
              margin-bottom: 30px;
            "
          >
            <span v-if="role == 1">管理员登录</span>
            <span v-else-if="role == 2">校级管理员登录</span>
            <span v-else-if="role == 3">院级管理员登录</span>
            <span v-else>欢迎教师/学生登录</span>
          </h3>
          <el-form-item prop="tel" label="账号">
            <el-input
              type="text"
              v-model="LoginForm.tel"
              placeholder="请输入账号/手机"
            ></el-input>
          </el-form-item>

          <el-form-item prop="pwd" label="密码">
            <el-input
              type="password"
              v-model="LoginForm.pwd"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="" v-if="role == 4 || role == 5">
            <el-radio-group v-model="role">
              <el-radio label="5">教师</el-radio>
              <el-radio label="4">学生</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item>
            <el-button
              type="primary"
              class="submitBtn"
              align="center"
              round
              @click.native.prevent="submit('LoginForm')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <BottomBar :isFixed="true"></BottomBar>
  </div>
</template>

<script>
import userApi from "@/api/user";
import IndexHeader from "@/components/IndexHeader";
import BottomBar from "@/components/BottomBar";

export default {
  name: "login",
  components: {
    IndexHeader,
    BottomBar,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.LoginForm.checkPass !== "") {
          this.$refs.LoginForm.validateField("checkPass");
        }
        callback();
      }
    };
    return {
      //登录
      role: null,
      //登录表单
      LoginForm: {
        pwd: "",
        tel: "",
      },
      //错误提示
      msg: "",
      error: false,
      //权限
      rule: {
        pwd: [
          {
            message: "密码是必须的！",
            trigger: "blur",
            validator: validatePass,
          },
        ],
        tel: [
          {
            trigger: "blur",
            validator: function (rule, value, callback) {
              if (value === "") {
                callback(new Error("请输入账号/电话号码"));
              } else {
                if (value !== "") {
                  var reg = /^1[3456789]\d{9}$/;
                  if (!reg.test(value)) {
                    callback(new Error("请输入正确的电话号码"));
                  }
                } else {
                  callback();
                }
                callback();
              }
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.role = this.$route.params.role;
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem("userInfo"));
    },
  },
  methods: {
    // 提交表单
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var formData = new FormData();
          formData.append("tel", this.LoginForm.tel);
          formData.append("password", this.LoginForm.pwd);
          formData.append("role", this.role);
          userApi.checkLoginByTel(formData).then((res) => {
            var data = res.data;
            console.log(data);
            if (data.code == 200) {
              this.error = false;
              console.log("登陆成功！", data.data);
              localStorage.setItem("userInfo", JSON.stringify(data.data));
              this.$message({
                message: "登录成功",
                type: "success",
              });
              this.$router.push("/userCenter");
            } else {
              this.error = true;
              this.msg = data.msg;
              this.$message.error(data.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    reset() {
      this.$refs.LoginForm.resetFields();
    },
  },
};
</script>

<style scoped>
.login-main {
  width: 560px;
  margin-top: 80px;
}
.submitBtn {
  width: 60%;
  margin-left: 20%;
}
</style>
